<template>
    <el-dialog title="列显示隐藏" class="jm-dialog-drag" custom-class="mydialog" width="20%" top="15vh" :visible.sync="params.visible" @opened="open" append-to-body>
        <div class="content">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0"></div>
            <el-checkbox-group v-model="checkedColumns" @change="handleCheckedColumnsChange">
                <el-checkbox v-for="item in columns" :label="item.prop" :key="item.prop">{{ item.label }}</el-checkbox>
            </el-checkbox-group>
        </div>
        <el-row style="text-align: center; margin: 10px">
            <el-button type="primary" size="mini" @click="btnSave">确定</el-button>
        </el-row>
    </el-dialog>
</template>

<script>
export default {
    props: {
        params: {
            type: Object,
            default: () => {
                return {
                    visible: false
                };
            }
        }
    },
    data() {
        return {
            isIndeterminate: true,
            checkAll: false,
            checkedColumns: [],
            columns: []
        };
    },
    mounted() {
        //首次加载时,默认全部勾上
        this.isIndeterminate = false; //去除全选的样式
        this.checkedColumns = this.params.columns.map(item => {
            return item.prop;
        });
        this.checkAll = true;
        this.columns = [];
        this.params.columns.forEach(el => {
            const { label, prop } = el;
            this.columns.push({
                label,
                prop
            });
        });
    },
    methods: {
        //确定
        btnSave() {
            this.$parent.$parent.colParams.columns.forEach(item => {
                item.isShow = false;
            });

            this.checkedColumns.forEach(el => {
                const index = this.$parent.$parent.colParams.columns.findIndex(item => item.prop == el);
                this.$parent.$parent.colParams.columns[index].isShow = true;
            });

            this.params.visible = false;
            this.$emit('colChange', JSON.parse(JSON.stringify(this.params.columns)));
        },
        open() {
            const array = [];
            this.params.columns.forEach(item => {
                if (item.isShow) {
                    array.push(item.prop);
                }
            });
            this.checkedColumns = array;
        },
        //全选
        handleCheckAllChange(val) {
            this.checkedColumns = val
                ? this.columns.map(item => item.prop)
                : [];
            this.isIndeterminate = false;
        },
        //勾选函数
        handleCheckedColumnsChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.columns.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.columns.length;
        }
    }
};
</script>

<style lang="scss" scoped>
.content {
    max-height: 400px;
}
.el-checkbox-group {
    font-size: 0;
    display: flex;
    flex-direction: column;
}
</style>
